import { Allotment } from "allotment"
import "allotment/dist/style.css"
import Header from "../components/Header"
import Materail from "../components/Materail"
import EditArea from "../components/EditArea"
import Setting from "../components/Setting"

const LowcodeEditor = () => {
  return (
    <div className="h-[100vh] w-[100vw] flex flex-col">
      <div className="h-[60px] flex items-center border-b-[1px] border-[#000]">
        <Header />
      </div>
      <Allotment className="w-full">
        <Allotment.Pane minSize={200} maxSize={300} preferredSize={240}>
          <Materail />
        </Allotment.Pane>
        <Allotment.Pane>
          <EditArea />
        </Allotment.Pane>
        <Allotment.Pane minSize={300} maxSize={500} preferredSize={300}>
          <Setting />
        </Allotment.Pane>
      </Allotment>
    </div>
  )
}

export default LowcodeEditor
